@media (max-width:480px){
    .container {
        width: 90vw!important;
        height: 90vw!important;
    }
    .over{
        font-size: 25px!important;
    }
    .over_box .img_box{
        width: 75px!important;
        height: 75px!important;
    }
    :root{
        --normal_size: 10vw!important;
        --big_size: 13vw!important;
    }
}
@font-face {
    font-family: "lcdD";
    src: url("../font/LcdD.ttf");
}
.over_box{
    text-align: center;
    user-select: none;

}
.over_box .img_box{
    margin-top: 30px;
    cursor: pointer;
    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.8);
    border-radius: 50%;
    padding: 10px;
    width: 100px;
    height: 100px;
    box-sizing: border-box;
    display:inline-flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(2px);
}
.over_box .img_box img{
    width: 95%;
    transform: rotate(0);
    transition: all .2s ease-in-out;
}
.over{
    letter-spacing: 10px;
    font-family: "lcdD";
    font-size: 5vw;
    color: white;
    text-shadow: 0 3px 3px black;
    animation: over .9s infinite ;
    animation-direction: alternate;
}
:root {
    --normal_size: 55px;
    --big_size: 70px
}

.container {
    z-index: 99;
    width: 440px;
    height: 440px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(4, 1fr);
    overflow: hidden;
    box-shadow:inset 0 0 5px  black;
    place-items: center;
    border-radius: 17px;
    padding: 20px;
    position: relative;
    border: 5px solid black;
    box-sizing: border-box;
}
.container::after{
    position: absolute;
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 200, 61,0.5);
    z-index: -1;
}

.container>div>span {
    border-radius: 50%;
    display: inline-block;
    cursor: pointer;
}

.container>div {
    font-size: var(--normal_size);
    opacity: 0;
    -webkit-user-select: none;
    -moz-user-select: none;
}

.container .square {
    animation: square 1s forwards;
}

@keyframes square {
    0% {
        opacity: 0.5;
        font-size: 68px;
    }
    14% {
        opacity: 1;
        font-size: var(--big_size);
    }
    28% {
        font-size: var(--normal_size);
        opacity: 1;
    }
    100% {
        opacity: 1;
    }
}

@keyframes side {
    0% {
        opacity: 1;
    }
    14% {
        font-size: var(--big_size);
        opacity: 1;
    }
    28% {
        font-size: var(--normal_size);
        opacity: 1;
    }
    100% {
        opacity: 1;
    }
}

@keyframes right_angle {
    0% {
        font-size: var(--big_size);
        opacity: 1;
    }
    14% {
        font-size: calc(var(--big_size) - 3px);
        opacity: 1;
    }
    28% {
        font-size: calc(var(--big_size) - 6px);
        opacity: 1;
    }
    42% {
        font-size: calc(var(--big_size) - 9px);
        opacity: 1;
    }
    56% {
        font-size: var(--normal_size);
        opacity: 1;
    }
    100% {
        opacity: 1;
    }
}
@keyframes over{
    to{
        transform:  translate(0,-25px);
    }
}
.active {
    border: 3px solid rgb(0, 109, 166);
    transform: scale(1);
    animation: select 0.4s ;
}
.correct{
    border: 3px solid rgb(8, 192, 77);
    transform: scale(1);
    animation: correct 0.2s ease-in-out;
}
@keyframes correct{
    0% {
        transform: scale(1);
    }

    25% {
        transform: scale(1.2)
    }

    50% {
        transform: scale(1);
    }

    75% {
        transform: scale(1.2);
    }

    100% {
        transform: scale(1);
    }
}
@keyframes select{
    0%{
        transform: scale(1);
    }
    50%{
        transform: scale(0.89);
    }
    100%{
        transform: scale(1);
    }
}
.container .right_angle {
    animation: right_angle 0.72s forwards;
    animation-delay: 0.28s;
}

.container .side {
    animation: side 0.86s forwards;
    animation-delay: 0.14s;
}

/* react 中写动画 animation: side 0.86s forwards;  顺序一定?要这样*/